<template>
   <div>
        <el-dialog title="创建用户" :visible.sync="dialogVisible" width="40%"
          :before-close="handleClose">
          <el-form  label-width="170px" :rules="rules" :model="formData" ref="formData" class="demo-ruleForm">
            <el-form-item label="用户名" prop="title">
              <el-input v-model="formData.title" style="width:70%"></el-input>
            </el-form-item>
            <el-form-item label="权限分配" >
              <el-tree
                :data="data"
                show-checkbox
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                @check-change='checkHandler'>
              </el-tree>
            </el-form-item>

          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false;formData={title: '',permissions:[]}">取 消</el-button>
            <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
          </span>
        </el-dialog>
   </div>
</template>

<script>
import {getmenus,addpermissions} from '@/api/permissions'
export default {
name: 'addPerm',
components: {},
props: {},
data() {
  return {
    data:[],
    // id:[],
    defaultProps: {
      children: 'childs',
      label: 'title'
    },
    // hireType:[],
    dialogVisible: false,
    formData: {
      title: '',
      permissions:[]
    },
    rules: {
        title: [
          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
          { min: 2, max: 8, message: '用户姓名为2-8位'}
        ],
      },
  };
},
methods: {
  handleClose(done) {
    this.$confirm('确认关闭？')
      .then(_ => {
        done();
      })
      .catch(_ => {});
  },
//   async getpermissions(){
//       const res=await getpermissions()
//       this.hireType=res.list
//       console.log(this.hireType);
//   },
    addpermissions(){
        const res=addpermissions(this.formData)
        console.log(res);
    },
 async submitForm(formName) {
     this.$refs[formName].validate((valid) => {
      if (valid) {

      } else {
        console.log('error submit!!');
        return false;
      }
      
    });
    const datae = JSON.parse(JSON.stringify(this.formData))
    await this.addpermissions(datae)
              // 3. 成功提示，失败处理
    this.$message.success('添加成功')
        // 4. 列表更新(子父通信)
    this.$emit('update-list')
        // 5. 表单重置、关闭
    this.dialogVisible = false
  },
  async getmenus(){
      const res=await getmenus()
      console.log(res);
      this.data=res
  },
  checkHandler(res1,res2,res3){
      const res = JSON.parse(
        JSON.stringify(res1).replaceAll("points", "childs")
      );
      console.log(res1);
      console.log('----');
      console.log(res);
    //   const res =res1.id
      
      if(res2){
          this.formData.permissions.push(res.id)
          this.setid(res)
      }else{      
        let index = this.formData.permissions.indexOf(res.id);
        this.formData.permissions.splice(index, 1)
        this.delsetid(res)
      }

  },
  setid(res){
      if(res.childs){
          res.childs.forEach(value => {
              this.formData.permissions.push(value.id)
              this.setid(value)
          });
      }
  },
  delsetid(res){
      if(res.childs){
          res.childs.forEach(value => {
              let index = this.formData.permissions.indexOf(value.id);
              this.formData.permissions.splice(index, 1)
              this.delsetid(value)
          });
      }
  }
},
computed: {},
watch: {},
created () {
    this.getmenus()
},
mounted () {},
}
</script>
<style lang='less' scoped>

</style>